<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <style type="text/css">
        #allmap {width: 100%;min-height: 555px;max-height: 555px;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #allmap_ds {width: 100%;min-height: 605px;max-height: 605px;overflow: hidden;margin:0;font-family:"微软雅黑";background-color: #E4E4E4;}
        #r-result{width:100%;}
        #placeId-result-ul li {
            height: 32px;
            cursor:pointer;
            transition: all 0.6s;
            padding: 6px 5px;
        }
        #placeId-result-ul li:hover {
            color: #FFFFFF;
            font-size:100%;
            background-color: #039BE5;
            transform: scale(1.04);
        }
        #placeId-result-ul li:active {
            background-color: snow;
            color:yellow;
        }
    </style>
    <div class="row placeDiv" style="display: none;">
        <div class="col-md-12">
            <form id="role-form-add" name="resourceForm" enctype="multipart/form-data" method="post" >
                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <input type="hidden" id="placeIdText" value=""/>
                                <input type="hidden" id="placeIdLnglat" value=""/>
                                <input type="text" name="name" id="placeId" class="form-control" placeholder="请输入地点" value=""/>
                                <div id="placeId-result" style="width: 95%;position: absolute;background-color: #F0F4FF;z-index: 99;">
                                    <ul id="placeId-result-ul" style="display: none;"></ul>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">
                                    <button type="button" class="btn btn-primary" id="select_map_place_btn_save">确  定</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>
    <div class="row placeDiv" style="display: none;">
        <div class="col-md-12">
            <div id="allmap"></div>
        </div>
    </div>
    <div class="row placeLoadding">
        <div class="col-md-12">
            <div id="allmap_ds">
                <div style="text-align: center;padding-top: 160px;">
                    <span class="icon icon-spin icon-spinner-snake" style="font-size: 16em;"></span>
                </div>
            </div>
        </div>
    </div>
    <script type="application/javascript">
        var _m = null;

        var _geoc = null;// 逆地址解析 解析对象

        var _selectType = '${selectType}';

        function G(id) {
            return document.getElementById(id);
        }

        //百度地图API功能
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "//api.map.baidu.com/api?v=3.0&ak=QMnUQIPOicpmLhi4X7Cmxhpv7wwkfvbo&callback=init";
            document.body.appendChild(script);
        }

        function init() {

            initMap();
            initMapEventListener();
            //initMapAutocomplete();

        }

        /**
         * 初始化地图
         */
        function initMap() {
            _m = new BMap.Map("allmap");            // 创建Map实例
            //_m.centerAndZoom(new BMap.Point(108.10179837803846, 34.546619424947146),11);
            _m.centerAndZoom("西安",11);
            //添加地图类型控件
            _m.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            //_m.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
            _m.enableScrollWheelZoom();                 //启用滚轮放大缩小
            $('.placeLoadding').hide();
            $('.placeDiv').show();
            _geoc = new BMap.Geocoder();// 逆地址解析 解析对象
            initMapAutocomplete();
        }

        /**
         * 初始化地图监听事件
         */
        function initMapEventListener() {
            /**
             * 监听地图加载完成事件
             */
            _m.addEventListener("tilesloaded",function(){
                console.log("地图加载完毕");
            });

            /**
             * 监听地图点击事件
             */
            _m.addEventListener("click", function (e) {
                var _point = e.point;
                _m.clearOverlays();    //清除地图上所有覆盖物
                _m.addOverlay(new BMap.Marker(_point));    //添加标注
                _geoc.getLocation(_point, function(rs){
                    selectPlace(rs.address, 1);
                });
            });
        }

        /**
         * 初始化地图关键字自动输入提示词条
         */
        function initMapAutocomplete() {
            var ac = new BMap.Autocomplete({    //建立一个自动完成的对象
                "input" : "placeId",
                "location" : _m.getCenter(),
                //"types": 'city',
                "onSearchComplete": function (res) {
                    var _keys = Object.keys(res);

                    if($('#placeIdText').val() != res[_keys[0]]){
                        if(res[_keys[0]] || res[_keys[1]] > 0){
                            var _lis = res[_keys[2]];
                            var _html = '';
                            for(var i in _lis){
                                var _ads = (_lis[i].city?_lis[i].city:'') + (_lis[i].district?_lis[i].district:'') +_lis[i].business;
                                _html += '<li class="placeId-result-li" onclick="selectPlace(\''+_ads+'\');"><span>' + _ads + '</span></li>';
                            }
                            $('#placeId-result-ul').html(_html);
                            $('#placeId-result-ul').show();
                        }else{
                            $('#placeId-result-ul').html('');
                            $('#placeId-result-ul').hide();
                        }
                    }else{
                        $('#placeId-result-ul').html('');
                        $('#placeId-result-ul').hide();
                    }
                }
            });
        }



        function selectPlace(placeText, isLocalSearch) {

            $('#placeIdText').val(placeText);
            $('#placeId').val(placeText);
            $('#placeId-result-ul').hide();

            if(isLocalSearch != 1){
                _m.clearOverlays();    //清除地图上所有覆盖物
                var local = new BMap.LocalSearch(_m, { //智能搜索
                    onSearchComplete: function() {
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        $('#placeIdLnglat').val(pp.lng+','+pp.lat);
                        _m.centerAndZoom(pp, 18);
                        _m.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                });
                local.search(placeText);
            }


        }


        $(function () {
            loadJScript();
            //点击备选框和输入框之外，会隐藏备选框
            $(document).click(function (e) {
                var target=e ? e.target : window.event.srcElement;
                if(target.className!="placeId-result-li" && target.className!="placeId-result-ul" && target.id!="placeId"){
                    $("#placeId-result-ul").hide();
                }
            });


        });

        $('#select_map_place_btn_save').on('click', function () {
            if($('#placeIdText').val()){
                $('#'+_selectType+'Text').val($('#placeIdText').val());
                $('#'+_selectType+'Lnglat').val($('#placeIdLnglat').val());
            }
            selectAddressModalT.close();
        });
        //window.onload = loadJScript;  //异步加载地图

    </script>

</div>
</body>
</html>